<template>
	<view>
		<!-- 地址列表 -->
		<view class="addressList" v-if="showaddressList">
			<view>
				<view class="address" v-for="(receiptDate,index) in receiptDateList" :key="receiptDate.id">
					<view class="address_top">
						<view class="address_top_left">
							<image src="../../../static/images/Positioning_icon_03.png" mode="widthFix"></image>
						</view>
						<view class="address_top_right">
							<view class="Receiver">
								<view>收货人：{{receiptDate.name}}</view>
								<view>{{receiptDate.mobile}}</view>
							</view>
							<view class="Shipping_address">
								收货地址：{{receiptDate.address}}
							</view>
						</view>
					</view>
					<view class="address_buttom">
						<view class="default_address" >
							<radio-group>
							<label class="radio" :class="{active:isChecked}" @click="radioChange(index)">
								<radio :value="receiptDate.id" :checked="receiptDate.isDefault"  color="#e94d6a"/>{{RadioText}}
							</label>
							</radio-group>
						</view>	
						<view class="Edit_address">
							<view @click="editAddress(index)">
								<image src="../../../static/images/edit_icon_03.png"></image>
								<text>编辑</text>
							</view>
							<view @click="deleteAddress(index)">
								<image src="../../../static/images/del_icon_03.png"></image>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 新增地址按钮 -->
			<view class="addAddress" v-if="showButton">
				<button @click="addAddress">新增地址</button>
			</view>
		</view>
		<!-- 无地址 -->
		<view class="noAddress" v-if="noAddress">
			<image src="../../../static/images/address_icon_03.png"></image>
			<text>暂无地址</text>
			<button @click="addAddress">添加地址</button>
		</view>
		<!-- 广告 -->
		<view :class="{AD:isAD,activeAD:isActiveAd}">
			<text>技术支持：</text>
			<image src="../../../static/images/log_03.png" style="width:30upx;height:24upx"></image>
			<text>掌邦科技</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noAddress:false,
				showaddressList:true,
				radioChecked:"",
				isChecked:"",
				RadioText:"设为默认地址",
				receiptDateList:"",
				showButton:false,
				isAD:true,
				isActiveAd:false
			};
		},
		methods:{
			//选中默认地址
			radioChange: function(evt) {
				let that=this;
				let tt=this.$store.state
				var id=that.receiptDateList[evt].id
                uni.request({
                	url: this.$store.state.URL + '/user/address/edit_default_address',
                	data: {
                		token: this.$store.state.token,
                		id:id
                	},
                	method:"POST",
                	success(res) {
                	  if(res.data.status==true){
						uni.request({
							url: tt.URL + 'user/user/user_address',
							data: {
								token: tt.token,
								isDefault: 0
							},
							method:"POST",
							success(res) {
								that.receiptDateList=res.data.data.address;
							},
						})
                	  	uni.showToast({
                	  		title:"已修改",
                	  		duration:1000,
                	  		mask:true
                	  	})
                	  }
                	},
                })
            },
			//删除地址
			deleteAddress(index){
				uni.showLoading({
					title:"删除中...",
					duration:1000,
					mask:true
				})
				let that=this;
				let tt=this.$store.state
				var id=that.receiptDateList[index].id;	
				uni.request({
					url: this.$store.state.URL + '/user/address/delete_user_address',
					data: {
						token: this.$store.state.token,
						id:id
					},
					method:"POST",
					success(res) {
					  if(res.data.status==true){
						 uni.request({
						 	url: tt.URL + 'user/user/user_address',
						 	data: {
						 		token: tt.token,
						 		isDefault: 0
						 	},
						 	method:"POST",
						 	success(res) {
						 		that.receiptDateList=res.data.data.address;
						 		uni.showToast({
						 			title:"已删除",
						 			duration:1000,
						 			mask:true
						 		})
						 		//无地址
						 		var length=that.receiptDateList.length;
						 		if(length==0){
						 			that.noAddress=true;
						 			that.showaddressList=false;
									that.isAD=true;
									that.isActiveAd=false;
						 		}
								if(length>=5){
									that.isAD=false;
									that.isActiveAd=true;
								}else{
									that.isAD=true;
									that.isActiveAd=false;
								}
						 	},
						 }) 
					  }
					},
				})
			},
			addAddress(){
				//跳转新增地址页面
				uni.redirectTo({
					url:"./addAddress/addAddress"
				})
			},
			editAddress(index){
				//跳转编辑地址页面
				uni.navigateTo({
					url:"./editAddress/editAddress?receiptDate="+JSON.stringify(this.receiptDateList[index])
				})
			},
			getReceiptDateList(){
				//数据加载提示框
				uni.showLoading({
					title: '拼命加载中',
					mask: true
				});
				let that=this;
				uni.request({
					url: this.$store.state.URL + 'user/user/user_address',
					data: {
						token: this.$store.state.token,
						isDefault: 0
					},
					method:"POST",
					success(res) {
						console.log(res);
						uni.hideLoading();
						if(res.data.data==null){
							that.noAddress=true;
							that.showaddressList=false;
						}else{
							that.receiptDateList=res.data.data.address;
							that.showButton=true;
							var length=that.receiptDateList.length;
							//无地址
							if(length==0){
								that.noAddress=true;
								that.showaddressList=false;
								that.isAD=true;
								that.isActiveAd=false;
							}
							if(length>=5){
								that.isAD=false;
								that.isActiveAd=true;
							}else{
								that.isAD=true;
								that.isActiveAd=false;
							}
						}
					},
				})
			},
		},
		//监听页面加载
		onLoad:function(options){
			this.getReceiptDateList();
		},
	}
</script>

<style>
	page{
		background:#F5F5F5;
	}
    .noAddress{
		width:100%;
		height:100%;
		text-align: center;
	}
	.noAddress image{
		width:273upx;
		height:256upx;
		margin-top:50%;
		margin-left:2%;
		margin-bottom: 30upx;
	}
	.noAddress text{
		display: block;
		font-size:28upx;
		color: #999999;
		margin-bottom: 30upx;
		opacity: 0.3;
	}
	.noAddress button{
		width:273upx;
		height:auto;
		background:#F5F5F5;
		border:1px solid #f2526f;
		border-radius: 50upx;
		font-size:30upx;
		color:#f2526f;
	}
	.address_top{
		display: flex;
	}
	.address_top_left{
		margin-left:20upx;
	}
	.address_top_right{
		margin-left:20upx;
		width: 100%;
	}
	.address_top_left image{
		width:43upx;
		height:52upx;
		margin:26upx 0;
	}
	.Receiver{
		display: flex;
		justify-content: space-between;
		/* height:40upx; */
		line-height: 40upx;
		width:100%;
	}
	.Receiver view:nth-of-type(1){
		font-size:32upx;
		color:#222222;
		margin-bottom: 10upx;
	}
	.Receiver view:nth-of-type(2){
		font-size:24upx;
		color:#222222;
		margin-right:20upx;
	}
	.Shipping_address{
		font-size:24upx;
		color:#7b7b7b;
	}
	.address{
		background: #fff;
		width:100%;
		height:auto;
		padding:20upx 0;
		margin-bottom: 20upx;
	}
	.address_buttom .radio{
		font-size:24upx;
	}
	radio {
        transform:scale(0.7);
   }
   .address_buttom{
	   margin:0 15upx;
	   display: flex;
	   justify-content: space-between;
   }
   .Edit_address{
	   display: flex;
   }
   .Edit_address view{
	   margin:0 10upx;
   }
   .Edit_address view image{
	   width:32upx;
	   height:32upx;
	   position: relative;
	   top:8upx;
	   left: 0upx;
   }
   .Edit_address view text{
	   font-size:24upx;
	   color: #999999;
	   margin-left: 15upx;
	   display: inline-block;
   }
   .active{
	   color:#f2526f;
   }
   .addAddress{
	   text-align: center;
	   position: relative;
   }
   .AD{
   	  position: absolute;
   	  bottom: 0;
   	  left:50%;
   	  margin-left: -18%;
   	  margin-bottom:15upx ;
   	  /* text-align: center;
   	  margin-left: -4%;
   	  margin-top:45%; */
   }
   .activeAD{
	  position: relative;
	  bottom: 0;
	  left:50%;
	  margin-left: -18%;
	  margin-bottom:15upx ; 
   }
   .AD text,.activeAD text{
   	  font-size:20upx;
   	  color:#999;
   	  margin:0 10upx;
   }
   .addAddress button{
	   width:710upx;
	   heihgt:80upx;
	   background:#f2526f;
	   font-size:30upx;
	   color:#fff;
   }
</style>
